<template></template>

<script>
import iconMap from "./icon";
import { Stage, Shape, Text } from "@createjs/easeljs";
export default {
  name: "TagTitleIcon",
  props: {
    tag: {
      type: Object,
      default: "",
    },
  },
  mounted() {
    this.createCanvas();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  watch: {
    tag(n, o) {
      if (n) {
        this.createCanvas();
      }
    },
  },
  methods: {
    createCanvas() {
      if (!this.tag) return;
      const { icon, color, text } = this.tag;
      if (!icon || !color || !text) return;
      let stage = this.stage;
      let cvs = this.canvas;
      if (!stage) {
        this.canvas = cvs = document.createElement("canvas");
        this.stage = stage = new Stage(cvs);
      }
      stage.removeAllChildren();

      const textL = this.drawText({
        text,
        textStyle: "normal bold 110px 微软雅黑",
        offsetX: 180,
        offsetY: 70,
        color: "#fff",
      });

      const textWidth = textL.getMeasuredWidth();
      const textHeight = textL.getMeasuredHeight();
      stage.addChild(
        this.drawRectangle({
          width: 110 + textWidth,
          height: 16 + textHeight,
          offsetX: 90,
          offsetY: 50,
          color: "#000",
          opacity: 0.5,
        })
      );

      stage.addChild(textL);
      stage.addChild(
        this.drawRectangle({
          width: 110,
          height: 110,
          rotation: 45,
          color: "#fff",
        })
      );
      stage.addChild(
        this.drawRectangle({
          width: 95,
          height: 95,
          offsetX: 20,
          offsetY: 0,
          rotation: 45,
          color,
        })
      );
      stage.addChild(
        this.drawText({
          text: iconMap[icon]?.decoded || iconMap["el-icon-eleme"].decoded,
          textStyle: "80px element-icons",
          offsetX: 110,
          offsetY: 120,
          center: true,
        })
      );

      cvs.width = 230 + textWidth;
      cvs.height = 120 + textHeight;
      stage.addChild(
        this.drawText({
          text: "▼",
          color: "#52a9cc",
          textStyle: "40px 微软雅黑",
          offsetX: cvs.width / 2 - 15,
          offsetY: cvs.height - 30,
        })
      );
      stage.update();
      if (this.$parent.realEntity) {
        this.$parent.realEntity.image = cvs;
      }
    },
    drawRectangle(params = {}) {
      const shape = new Shape();
      const { width, height, offsetX, offsetY, rotation, color, opacity } = {
        width: 50,
        height: 50,
        offsetX: 0,
        offsetY: 0,
        rotation: 0,
        opacity: 1,
        color: "#000",
        ...params,
      };
      shape.graphics.beginFill(color).drawRect(offsetX, offsetY, width, height);
      if (rotation) {
        shape.x = width;
        shape.y = height;
        shape.regX = width / 2;
        shape.regY = height / 2;
      }

      shape.alpha = opacity;
      shape.rotation = rotation;
      return shape;
    },
    drawText(params = {}) {
      const { text, textStyle, offsetX, offsetY, color, center } = {
        text: "123",
        textStyle: "20px Arial",
        offsetX: 0,
        offsetY: 0,
        color: "#fff",
        center: false,
        ...params,
      };
      const shape = new Text(text, textStyle, color);
      const height = shape.getMeasuredHeight();
      const width = shape.getMeasuredWidth();
      if (center) {
        shape.regX = width / 2;
        shape.regY = height / 2;
      }
      shape.x = offsetX;
      shape.y = offsetY;
      return shape;
    },
  },
};
</script>
